<template>
  <el-form-item>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基础参数" name="1">
        <baseFormStyle />
      </el-collapse-item>
      <el-collapse-item title="柱图样式" name="2">
        <barSimpleStyle :seriesConfig='seriesConfig' />
      </el-collapse-item>
      <el-collapse-item title="X轴" name="3">
        <xAxis :xAxisConfig='chartConfig'/>
      </el-collapse-item>
      <el-collapse-item title="Y轴" name="5">
			 <yAxis :yAxisData="yAxisData"/>
			</el-collapse-item>
      <el-collapse-item title="动画设置" name="4">
        <animationConfig :animationConfig='chartConfig'/>
      </el-collapse-item>
    </el-collapse>
  </el-form-item>
</template>

<script>
import xAxis from "../components/xAxis";
import yAxis from '../components/yAxis'
import baseFormStyle from "../components/baseFormStyle";
import barSimpleStyle from "../components/barSimpleStyle";
import animationConfig from "../components/animationConfig";
import { mapState, mapGetters } from "vuex";
export default {
  name: "attr-qk-baseBarChartForm",
  computed: {
    ...mapState({
      // projectData: state => state.editor.projectData,
      // activePageUUID: state => state.editor.activePageUUID,
      // activeElementUUID: state => state.editor.activeElementUUID,
      activeAttrEditCollapse: state => state.editor.activeAttrEditCollapse
    }),
    ...mapGetters([
      // 'currentPageIndex',
      // 'activeElementIndex',
      // 'activeElement',
      // 'activePage'
      "activeElement"
    ]),
    chartConfig() {
      return this.activeElement.propsValue.baseBarChartForm;
    },
    yAxisData() {
      return this.activeElement.propsValue.baseBarChartForm.yAxis;
    },
    seriesConfig(){
      return this.activeElement.propsValue.baseBarChartForm.series[0]
    },
  },
  data() {
    return {
      activeNames: ["1"],
      color: ""
    };
  },
  mounted() {
    this.activeNames = this.activeAttrEditCollapse;
  },
  watch: {
    activeNames() {
      this.$store.commit("updateActiveAttrEditCollapse", this.activeNames);
    }
  },
  components: {
    xAxis,
    yAxis,
    baseFormStyle,
    barSimpleStyle,
    animationConfig
  }
};
</script>

<style scoped>
</style>
